<template>
	<view>

		<view class="ptb12 plr15">
			<text class="bu-back" @click="bu2()">返回我的钱包</text>
		</view>

		<view class="ptb12 plr15 progress ml20">
			<u-steps current="1" direction="column">

				<u-steps-item>
					<!-- 图标 -->
					<view slot="icon">
						<view class="icons1 color1" :class="{ color2: statue == 1}">
							<image src="../../static/images/wallet/pro-icon1.png" mode=""
								style="width: 50upx;height: 12upx;" v-if="statue == 0"></image>
							<image src="../../static/images/wallet/pro-icon5.png" mode=""
								style="width: 41upx;height: 42upx;" v-else-if="statue == 1"></image>
							<image src="../../static/images/wallet/pro-icon4.png" mode=""
								style="width: 49upx;height: 34upx;" v-else></image>
						</view>
					</view>
					<!-- 内容 -->
					<view slot="desc">
						<view class="main1" v-if="statue == 0">
							<view class="main-one">签约资料已提交，等待审核</view>
							<view class="main-two">预计3个工作日审核完成</view>
							<view class="main-three" @click="navTo(`/pages/wallet/bindCard?val=1&isEdit=2`)">查看资料</view>
						</view>
						<view class="main1" v-else-if="statue == 1">
							<view class="main-one">资料审核不通过，请重新提交</view>
							<view class="main-two">错误原因：{{reject_comment}}</view>
							<view class="main-three1" @click="navTo(`/pages/wallet/bindCard?val=1&isEdit=1`)">去修改</view>
						</view>
						<view class="main1" v-else>
							<view class="main-one">签约资料已审核通过</view>
						</view>
					</view>

				</u-steps-item>



				<u-steps-item>
					<!-- 图标 -->
					<view slot="icon">
						<view class="icons1 color1" :class="{ color3: statue == 0||statue == 1}">
							<image src="../../static/images/wallet/pro-icon2.png" mode=""
								style="width: 46upx;height: 39upx;"></image>
						</view>
					</view>
					<!-- 内容 -->
					<view slot="desc">
						<view class="main1" v-if="statue == 0||statue == 1 ||statue == 2">
							<view class="main-one">完善提现银行卡信息</view>
							<view class="main-three1" style="margin-top: 8upx;" v-if="statue == 2" @click="bu1()">去完善</view>
						</view>
						<view class="main1" v-else>
							<view class="main-one">提现银行卡信息已完善</view>
						</view>

					</view>
				</u-steps-item>

				<u-steps-item>
					<!-- 图标 -->
					<view slot="icon">
						<view class="icons1 color1" :class="{ color3: statue == 0||statue == 1||statue == 2}">
							<image src="../../static/images/wallet/pro-icon3.png" mode=""
								style="width: 48upx;height: 45upx;margin-left: 10upx;"></image>
						</view>
					</view>
					<!-- 内容 -->
					<view slot="desc">
						<view class="main1">
							<view class="main-one">在线签约协议</view>
						</view>
					</view>
				</u-steps-item>

				<u-steps-item>
					<!-- 图标 -->
					<view slot="icon">
						<view class="icons1 color1" :class="{ color3: statue == 0||statue == 1||statue == 2||statue ==3}">
							<image src="../../static/images/wallet/pro-icon4.png" mode=""
								style="width: 49upx;height: 34upx;"></image>
						</view>
					</view>
					<!-- 内容 -->
					<view slot="desc">
						<view class="main1">
							<view class="main-one">电签成功</view>
						</view>
					</view>
				</u-steps-item>

			</u-steps>




		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				statue: 2 ,//0签约审核中；1签约审核失败；2完善提现银行卡信息；3签约协议中；4电签成功
				reject_comment:'',
			}
		},
		computed: {

		},
		onLoad(options) {
			if(options.val == 1){
				
				this.statue=2
			}else if(options.val == 0){
				
				this.statue=0
			}else if(options.val == -1){
				this.statue=1
				this.getbankAPI() 
			}else if(options.val == 2){
				
				this.statue=3
			}else if(options.val == 3){
										
										this.statue=4
									}
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			this.getbankAPI()
				console.log('refresh');
			},
		methods: {
			// 获取回显的银行卡信息
			async getbankAPI() {
				const res = await this.$api.getbank()
				if (res && res.code == 1) {
					if (res.data && res.data.step) {
						let options = {
							val:res.data.step
						}
						if(options.val == 1){
										
										this.statue=2
									}else if(options.val == 0){
										
										this.statue=0
									}else if(options.val == -1){
										this.statue=1
									}else if(options.val == 2){
										
										this.statue=3
									}else if(options.val == 3){
										
										this.statue=4
									}
									console.log(res.data.reject_comment,1111111111);
						this.reject_comment = res.data.reject_comment
					}
					uni.stopPullDownRefresh();
				}
			},
			bu1(){
				this.navTo('/pages/wallet/perfect-rebinding')
			},
			bu2(){
				this.navTo('/pages/wallet/index')
			}

		}
	}
</script>

<style lang="scss">
	.placeholderStyle {
		font-size: 30upx !important;
	}

	.tip {
		background-color: rgba(242, 60, 75, 0.1);
	}

	.bu-back {
		color: #00A8FF;
		line-height: 50upx;
		text-decoration-line: underline;
	}

	.progress {

		.color1 {
			background-color: #61D9B3;
		}

		.color2 {
			background-color: #F44A42;
		}

		.color3 {
			background-color: #DDDDDD;
		}

		.icons1 {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.main1 {
			// background: #b3b3b3;
			width: 90%;
			height: 218upx;
			margin-top: -20upx;
			margin-left: 40upx;

			.main-one {
				line-height: 80upx;
				font-size: 32upx;
			}

			.main-two {
				color: #999999;
				font-size: 24upx;
			}

			.main-three {
				color: #333333;
				font-size: 24upx;
				text-align: center;
				width: 120upx;
				height: 50upx;
				line-height: 44upx;
				border: 2upx solid #333333;
				border-radius: 8upx;
				margin-top: 18upx;
			}

			.main-three1 {
				color: #F44A42;
				font-size: 24upx;
				text-align: center;
				width: 120upx;
				height: 50upx;
				line-height: 44upx;
				border: 2upx solid #F44A42;
				border-radius: 8upx;
				margin-top: 18upx;
			}

		}

	}

	// .ww{
		/deep/ .u-steps-item__line {
			margin-top: 80upx;
			height: 120upx !important;
			width: 3upx !important;
			background-color: #61D9B3 !important;
		}
	// }
	
	// .ww1{
	// 	/deep/ .u-steps-item__line {
	// 		margin-top: 80upx;
	// 		height: 120upx !important;
	// 		width: 3upx !important;
	// 		background-color: #b398d9 !important;
	// 	}
	// }
</style>